<!DOCTYPE html>
<html lang="en">
<head>
    <title>SunivoWeb | Demo</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="author" content="Huazz Tsai">
    <meta name="keyword" content="">
    <link rel="shortcut icon" href="../customize/ico/favicon.ico">
    <link rel="apple-touch-icon" href="../customize/ico/favicon.ico">
    <!--[if lt IE 9]>
    <script type="text/javascript" src="../script/html5shiv.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="../customize/css/sunivoweb.frame.css"/>
    <link rel="stylesheet" href="../customize/css/reset.css"/>
    <link rel="stylesheet" href="../customize/css/sunivoweb_style.css">
    <link rel="stylesheet" href="../customize/css/yc.css"/>
    <script type="text/javascript" src="../customize/script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../customize/script/sunivoweb.frame.js"></script>
    <script type="text/javascript" src="../customize/script/ports.js"></script>
    <script type="text/javascript" src="../customize/script/portSelector.js"></script>
    <script type="text/javascript" src="../customize/script/sunivoweb.app.js"></script>
    <script>(function($){$.initover = function(fn) {$(document).one('initover', fn);}})(jQuery);</script>
    <script type="text/javascript" src="../customize/script/handlebars.js"></script>
</head>
<body>
<div class="index-nav-container">
            <ul class="index-nav">
                <li><a href="../../index.html">首页</a></li>
                <li  class="active"><a href="components.html">组件</a></li>
                <li><a href="#">JavaScript插件</a></li>
            </ul>
</div>
<div class="component-banner-bg">
    <div class="component-banner"></div>
</div>
<div class="component-content clearfix">
    <!--左边列表-->
    <ul class="component-list" id="pordAttr">
        <li><a class="on" href="javascript:void(0);" grop="Index_box" nav="IndexTab_0">Bootstrap</a>
            <ul class="component-second-list" grop="Index_box" nav="IndexTab_0" id="plug1">
            </ul>
        </li>
        <li><a href="javascript:void(0);" grop="Index_box" nav="IndexTab_1">Sunivo</a>
            <ul class="component-second-list" grop="Index_box" nav="IndexTab_1" style="display:none;" id="plug2">
            </ul>
        </li>
        <li><a href="javascript:void(0);" grop="Index_box" nav="IndexTab_2">Plugin</a>
            <ul class="component-second-list" grop="Index_box" nav="IndexTab_2" style="display:none;" id="plug3">
            </ul>
        </li>
    </ul>
    <!--右边具体插件-->
    <div class="component-substance clearfix">
        <h1>自定义modal</h1>
        <h5 class="pull-right text-success">作者：杨成  版本: 0.1 日期: 2014-3-26</h5>
        <h3>动态演示</h3>
        <!--插件编译人、编译时间-->
        <div class="clearfix custom-modal">
            <div class="pull-left x-box">
                <a href="javascript:void(0);" class="btn module1" data-toggle="popover" data-placement="top" data-content="采用默认布局样式">Module1</a>
            </div>
            <div class="pull-left x-box">
                <a href="javascript:void(0);" class="btn btn-primary module2" data-toggle="popover" data-placement="top" data-content="可以采用bootstrap-modal默认提供的两组关闭按钮，默认按钮不提供点击事件">Module2</a>
            </div>
            <div class="pull-left x-box">
                <a href="javascript:void(0);" class="btn btn-warning module3" data-toggle="popover" data-placement="top" data-content="可以为默认按钮提供自定义点击事件">Module3</a>
            </div>
            <div class="pull-left x-box">
                <a href="javascript:void(0);" class="btn btn-info module4" data-toggle="popover" data-placement="top" data-content="可以自定义尾部内容，搭建自己的按钮组，当然，这需要自己绑定点击事件">Module4</a>
            </div>
            <div class="pull-left x-box">
                <a href="javascript:void(0);" class="btn btn-danger module5" data-toggle="popover" data-placement="bottom" data-content="如果不采用bootstrap-modal默认样式，可以选用整个内容自定义">Module5</a>
            </div>
            <div class="pull-left x-box">
                <a href="javascript:void(0);" class="btn btn-success module6" data-toggle="popover" data-placement="bottom" data-content="支持异步请求导入">Module6</a>
            </div>
            <div class="pull-left x-box">
                <a href="javascript:void(0);" class="btn module7 x-module7" data-toggle="popover" data-placement="bottom" data-content="修改css结构大小，导出图片">Module7</a>
            </div>
            <!--<div class="pull-left x-box">
                <a href="javascript:void(0);" class="btn-primary btn module8 x-module8" data-toggle="popover" data-placement="bottom" data-content="采用默认布局样式">Module8</a>
                <p></p>
            </div>-->
        </div>
        <h3>调用方式</h3>
        <pre class="x-code-bg"><ul><li><span class="x-code-commet">//使用前先引入SunivoWeb-ui.js</span></li><li class="x-code-common">var Btns = <span class="x-code-retainword">new</span> <span class="x-code-globelapi">app</span>();<span class="x-code-commet">//实例化app</span></li><li class="x-code-common">Btns.<span class="x-code-customapi">creatModule</span>({</li><li>&nbsp;&nbsp;<span class="x-code-customapi">defaults</span><span class="x-code-common">: true,</span></li><li>&nbsp;&nbsp;<span class="x-code-customapi">hasHeader</span><span class="x-code-common">: true,</span></li><li>&nbsp;&nbsp;<span class="x-code-customapi">fillHeader</span><span class="x-code-common">: 'module1',</span></li><li>&nbsp;&nbsp;<span class="x-code-customapi">hasClose</span><span class="x-code-common">: true,</span></li><li>&nbsp;&nbsp;<span class="x-code-customapi">hasBody</span><span class="x-code-common">: true,</span></li><li>&nbsp;&nbsp;<span class="x-code-customapi">fillBody</span><span class="x-code-common">: '我是自定义的主体内容',</span></li><li>&nbsp;&nbsp;<span class="x-code-customapi">hasDefFooter</span><span class="x-code-common">: false,</span></li><li>&nbsp;&nbsp;<span class="x-code-customapi">bindEvent</span><span class="x-code-common">: $('.module1')</span></li><li class="x-code-common">})</li><li></li></ul></pre>
        <h3>选项</h3>
        <p class="text-blue">配置模式1：默认采用bootstrap-modal的三层布局，有以下配置参数挑选  <span class="text-error">（不能与模式2的参数同时配置）</span></p>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>参数名</th>
                    <th>功能</th>
                    <th>可选参数类型</th>
                    <th>默认</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td>defaults</td>
                <td>是否采用modal弹出框基本布局，header，body，footer</td>
                <td>布尔型</td>
                <td>false</td>
            </tr>
            <tr>
                <td>hasHeader</td>
                <td>是否需要采用header头部布局</td>
                <td>布尔型</td>
                <td>false</td>
            </tr>
            <tr>
                <td>fillHeader</td>
                <td>如果自定义，填充的信息</td>
                <td>String</td>
                <td>空字符</td>
            </tr>
            <tr>
                <td>hasClose</td>
                <td>是否需要采用x的关闭按钮</td>
                <td>布尔型</td>
                <td>false</td>
            </tr>
            <tr>
                <td>hasBody</td>
                <td>是否需要采用body布局</td>
                <td>布尔型</td>
                <td>false</td>
            </tr>
            <tr>
                <td>fillBody</td>
                <td>如果自定义，填充的信息</td>
                <td>String</td>
                <td>空字符</td>
            </tr>
            <tr>
                <td>hasDefFooter</td>
                <td>是否采用默认footer，拥有两个关闭按钮</td>
                <td>布尔型</td>
                <td>false</td>
            </tr>
            <tr>
                <td>fillFooter</td>
                <td>如果自定义，填充的信息</td>
                <td>String</td>
                <td>空字符</td>
            </tr>
            <tr>
                <td><a href="#_defBtnEvent">defBtnEvent</a></td>
                <td>如果采用默认footer布局，可键入对应的点击事件</td>
                <td>Object</td>
                <td>空对象</td>
            </tr>
        </tbody>
    </table>
        <p class="text-success">配置模式2：自定义整个内容样式，有以下配置参数可选  <span class="text-error">（不能与模式1的参数同时配置）</span></p>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>参数名</th>
                    <th>功能</th>
                    <th>可选参数类型</th>
                    <th>默认</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href="#_custom">custom</a></td>
                    <td>是否采用自定义的布局方式</td>
                    <td>布尔型，String，Jquery对象</td>
                    <td>null</td>
                </tr>
                <tr>
                    <td>url</td>
                    <td>异步请求的资源路径</td>
                    <td>String</td>
                    <td>空字符</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>需要一起传输到后台的信息</td>
                    <td>String</td>
                    <td>空字符</td>
                </tr>
                <tr>
                    <td>callback</td>
                    <td>请求资源的回调函数</td>
                    <td>Function</td>
                    <td>null</td>
                </tr>
            </tbody>
        </table>
        <p class="text-warning">以下配置参数可以通用</p>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>参数名</th>
                    <th>功能</th>
                    <th>可选参数类型</th>
                    <th>默认</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>backdrop</td>
                    <td>是否是固态背景</td>
                    <td>布尔型</td>
                    <td>true</td>
                </tr>
                <tr>
                    <td>keyboard</td>
                    <td>是否关闭键盘的ESC键的触发modal关闭</td>
                    <td>布尔型</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td><a href="#_cssRule">cssRule</a></td>
                    <td>修改整个modal，最外层的布局样式</td>
                    <td>object</td>
                    <td>空对象</td>
                </tr>
                <tr>
                    <td>bindEvent</td>
                    <td>触发弹出框需要关联的对象</td>
                    <td>Jquery对象</td>
                    <td>body</td>
                </tr>
                <tr>
                    <td>showNow</td>
                    <td>生成完定制的modal是否立即展示</td>
                    <td>布尔型</td>
                    <td>true</td>
                </tr>
            </tbody>
        </table>
        <h3>使用注意：</h3>
        <p>1.一般根据业务需求，自定义弹出框需要绑定到一个触发元素上(比如说按钮等)，所以一般配置时都要配置 <span class="x-code-customapi">bindEvent</span> ，绑定到一个<span class="text-error">jQuery对象</span>中。</p>
        <p name="_defBtnEvent" id="_defBtnEvent">2.defBtnEvent的几个参数形式</p>
        <pre class="x-code-bg"><ul><li><span class="x-code-commet">//使用前先引入SunivoWeb-ui.js</span></li><li><span class="x-code-common">...</span></li><li><span class="x-code-customapi">defBtnEvent</span><span class="x-code-common">: {</span></li><li><span class="x-code-customapi">&nbsp;&nbsp;ensure</span><span class="x-code-common">: <span class="x-code-globelapi">function</span>(e){</span><span class="x-code-commet">//这里的e可以获取到事件源对象</span></li><li><span class="x-code-globelapi">&nbsp;&nbsp;&nbsp;&nbsp;alert</span><span class="x-code-common">('我的按钮内容是'+ e.<span class="x-code-globelapi">innerHTML</span>);</span></li><li><span class="x-code-common">&nbsp;&nbsp;},</span></li><li><span class="x-code-customapi">&nbsp;&nbsp;cancel</span><span class="x-code-common">: <span class="x-code-globelapi">function</span>(e){</span></li><li><span class="x-code-globelapi">&nbsp;&nbsp;&nbsp;&nbsp;alert</span><span class="x-code-common">('我的按钮内容是'+ e.<span class="x-code-globelapi">innerHTML</span>);</span></li><li><span class="x-code-common">&nbsp;&nbsp;&nbsp;&nbsp;}</span></li><li><span class="x-code-common">&nbsp;&nbsp;},</span></li><li><span class="x-code-common">...</span></li></ul></pre>
        <p name="_cssRule" id="_cssRule">3.cssRule参数一般写法,基本跟jQuery中的css()方法内的参数一致，属于key-value对</p>
        <pre class="x-code-bg"><ul><li><span class="x-code-commet">//使用前先引入SunivoWeb-ui.js</span></li><li><span class="x-code-common">...</span></li><li><span class="x-code-customapi">cssRule</span><span class="x-code-common">: {</span><span class="x-code-commet">//用法跟jQuery的css方法类似</span></li><li><span class="x-code-common">&nbsp;&nbsp;'width': '600px'</span></li><li><span class="x-code-common">&nbsp;&nbsp;'margin-left': '-300px'</span></li><li><span class="x-code-common">}</span></li><li><span class="x-code-common">...</span></li></ul></pre>
        <p name="_custom" id="_custom">4.custom参数的配置，一般有三种情况</p>
        <pre class="x-code-bg"><ul><li><span class="x-code-commet">//使用前先引入SunivoWeb-ui.js</span></li><li><span class="x-code-commet">...</span></li><li><span class="x-code-commet">//custom传入字符串</span></li><li><span class="x-code-customapi">custom</span><span class="x-code-common">: '我是完全自定义的内容&lt;a href="javascript:void(0);" data-dismiss="modal"&gt;关闭&lt;/a&gt;'</span></li><li><span class="x-code-common">...</span></li><li><span class="x-code-customapi">custom</span><span class="x-code-common">: true,</span><span class="x-code-commet">//如果需要异步请求，请填写资源路径，custom参数置成true</span></li><li><span class="x-code-customapi">url</span><span class="x-code-common">'standard-paging.html',</span></li><li><span class="x-code-common">...</span></li><li><span class="x-code-commet">//如果觉得输入字符串太过于麻烦，也可以获取到插入信息的最外层对象传给custom，效果一样。</span></li><li><span class="x-code-customapi">custom</span><span class="x-code-common">: $('.img1'),</span></li></ul></pre>
        <h3>一般问题：</h3>
    </div>
</div>
<!--底部-->
<div class="foot">
    <p>本网站所列开源项目的中文版文档全部由Sunivo Web成员翻译整理</p>
    <p>Powered by Sunivo Web Team 站长统计</p>
</div>
<script id="table-template" type="text/x-handlebars-template">
    {{#each plug1}}
    {{#if link}}
    <li>
        <a href="{{link}}">{{title}}</a>
    </li>
    {{/if}}
    {{/each}}


    {{#each plug2}}
    {{#if link}}
    <li>
        <a href="{{link}}">{{title}}</a>
    </li>
    {{/if}}
    {{/each}}

    {{#each plug3}}
    {{#if link}}
    <li>
        <a href="{{link}}">{{title}}</a>
    </li>
    {{/if}}
    {{/each}}

</script>
<script type="text/javascript" src="../customize/script/sunivoweb-left-nav.js"></script>
<script type="text/javascript" src="../customize/js/underscore-1.6.js"></script>
<script type="text/javascript" src="../customize/js/SunivoWeb-ui.js"></script>
<script type="text/javascript">
    $('.btn').popover({
        trigger:'hover'
    });
    var Btns = new app();
    Btns.createModal({
        defaults: true,
        hasHeader: true,
        fillHeader: 'module1',
        hasClose: true,
        hasBody: true,
        fillBody: '我是自定义的主体内容',
        hasDefFooter: false,
        bindEvent: $('.module1')
    });
    Btns.createModal({
        defaults: true,
        hasHeader: true,
        fillHeader: 'module2',
        hasBody: true,
        fillBody: '我使用了默认按钮',
        hasDefFooter: true,
        bindEvent: $('.module2')
    });
    Btns.createModal({
        defaults: true,
        hasHeader: true,
        fillHeader: 'module3',
        hasBody: true,
        fillBody: '我为默认按钮绑定了自定义事件',
        hasDefFooter: true,
        defBtnEvent: {
            ensure: function(e){
                alert('我的按钮内容是'+ e.innerHTML);
            },
            cancel: function(e){
                alert('我的按钮内容是'+ e.innerHTML);
            }
        },
        bindEvent: $('.module3')
    });
    Btns.createModal({
        defaults: true,
        hasHeader: true,
        fillHeader: 'module2',
        hasBody: true,
        fillBody: '我为默认按钮绑定了自定义事件',
        hasDefFooter: false,
        fillFooter: '<p>我是一个自定义的尾部</p><a href="javascript:void(0);" onclick="customFun1(this)">自定义按钮</a><a href="javascript:void(0);" class="btn" data-dismiss="modal">关闭</a>',
        bindEvent: $('.module4')
    });
    function customFun1(e){
        $(e).text('我自己修改了自定义按钮的名字');
    }
    Btns.createModal({
        custom: '我是完全自定义的内容<a href="javascript:void(0);" data-dismiss="modal">关闭</a>',
        bindEvent: $('.module5')
    });
    Btns.createModal({
        custom: true,
        url: 'standard-paging.html',
        bindEvent: $('.module6')
    });
    Btns.createModal({
        custom: '<a class="close" data-dismiss="modal">×</a><img src="../customize/img/yc/lion.jpg">',
        bindEvent: $('.module7'),
        cssRule: {
            'width': '600px',
            'margin-left': '-300px'
        }
    });
</script>
</body>
</html>